<template>
	<div class="manageNav scroll">
		<div v-for="(item,index) in list" :key="item.menu_id">
			<div class="navItem" v-if="item.isShow">
				<template v-if="item.meta?.displayable !== false">
					<div class="navItemTitle" @click="navClick(item)" :class="{navItemTitleOn: item.change}">
						<div>
							<el-image :src="item.icon" v-if="item.icon"></el-image>
							<span>{{item.meta?.title || item.title}}</span>
						</div>
						<div class="sj" v-if="item.hasChildren" :class="{on: item.isShowChild}"></div>
					</div>
					<div v-if="item.hasChildren" class="navMode"
						:style="'height: '+(item.isShowChild ? 50 * canShowChild(item.children) : 0) + 'px'">
						<template v-for="(t,i) in item.children">
							<div class="navChildrenItem" v-show="t.isShow && t.meta?.displayable !== false">
								<div class="navChildrenContent" @click="navClick(t)"
									:class="{navChildrenContentOn: t.change}">
									<span>{{t.meta?.title || t.title}}</span>
								</div>
							</div>
						</template>
					</div>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
	import navs from '../router/router.js'
	
	export default {
		name: 'mclz',
		data() {
			return {
				list: [],
			}
		},
		created() {
			if (this.$store.state.token) {
				this.initNav();
			}
		},
		watch: {
			$route() {
				this.setNav();
				if(this.$store.state.token && this.$store.state.authList.length == 0){
					this.$nextTick(() => {
						this.initNav();
					})
				}
			}
		},
		methods: {
			initNav() {
				this.$request.common.getAdminUserInfoByToken().then(res => {
					if(res && res.data.code == 200) {
						this.$store.commit('setUserInfo', res.data.content.data);
						let menuList = this.$store.state.userInfo.menu_list || [];
						
						// 直接使用接口返回的菜单数据
						this.list = menuList.map(item => {
							// 查找对应的路由配置
							const routeConfig = navs.find(nav => nav.name === item.file_path) || 
											  navs.find(nav => nav.path === item.path);
							
							return {
								...item,
								meta: routeConfig?.meta || {
									title: item.title,
									displayable: true
								},
								name: routeConfig?.name || item.file_path || item.path,
								path: routeConfig?.path || item.path,
								isShowChild: false,
								change: false,
								hasChildren: item.children && item.children.length > 0,
								isShow: true,
								children: (item.children || []).map(child => {
									const childRoute = routeConfig?.children?.find(c => c.name === child.file_path) || 
													 navs.find(nav => nav.name === child.file_path);
									
									return {
										...child,
										meta: childRoute?.meta || {
											title: child.title,
											displayable: true
										},
										name: childRoute?.name || child.file_path,
										path: childRoute?.path || child.path,
										isShow: true,
										change: false
									}
								})
							}
						}).filter(item => item.meta.displayable !== false);
						
						this.setNav();
					}
				})
			},
			canShowChild(list) {
				return list.filter(item => item.meta?.displayable !== false && item.isShow).length
			},
			setNav() {
				this.list.forEach(item => {
					item.change = false;
					item.canShow = item.meta?.displayable !== false;
					
					if (item.children) {
						item.hasChildren = item.children.length > 0;
						item.children.forEach(child => {
							child.change = false;
							
							// 检查当前路由是否匹配
							const isMatched = this.$route.matched.some(record => 
								record.name === child.name || record.path === child.path
							);
							
							if (isMatched) {
								child.change = true;
								item.isShowChild = true;
							}
						});
					}
					
					// 检查父级路由是否匹配
					const isParentMatched = this.$route.matched.some(record => 
						record.name === item.name || record.path === item.path
					);
					
					if (isParentMatched) {
						item.change = true;
					}
				});
			},
			navClick(item) {
				
				if (item.hasChildren) {
					item.isShowChild = !item.isShowChild;
				} else if (item.path) {
					if (item.path !== this.$route.path) {
						this.$store.commit('$navTo', item.path);
					}
				}
			}
		}
	}
</script>

<style>
	.navItemTitleOn .el-image {
		overflow: hidden;
		width: 15px;
	}

	.navItemTitle:hover .el-image img,
	.navItemTitleOn .el-image img {
		filter: drop-shadow(0px 150px 0px #fff);
		transform: translateY(-150px);
		width: 15px;
	}
</style>

<style scoped lang="scss">
	.el-image {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.manageNav {
		width: 100%;
		padding: 0 0 80px;
		user-select: none;
		overflow-y: scroll;
		background: #FFF;
		height: calc(100vh - 80px) !important;
		
		&::-webkit-scrollbar {
			width: 0;
			background-color: var(--el-color-primary);
		}

		&::-webkit-scrollbar-thumb {
			background-color: #FFF;
			-webkit-border-radius: 2em;
			-moz-border-radius: 2em;
			border-radius: 2em;
		}

		.navItem {
			.navItemTitle {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				height: 60px;
				padding: 12px 12px 12px 20px;
				border-top: 1px solid #F3F3F3;
				cursor: pointer;
				
				.el-image {
					width: 14px;
				}

				svg {
					color: #666;
				}

				transition: all .2s;
				
				.sj {
					width: 0;
					height: 0;
					border: 5px solid;
					border-color: var(--el-color-primary) transparent transparent;
					border-radius: 2px;
					transform: translateY(2px);
					
					&.on {
						transform: translateY(-2px) rotateZ(180deg);
					}
				}
				
				&.navItemTitleOn {
					background: var(--el-color-primary);
					border-top: 1px solid var(--el-color-primary);
					color: #FFF;
					
					.sj {
						transform: translateY(-2px) rotateZ(180deg);
						border-color: #FFF transparent transparent;
					}
					
					> div {
						span, svg {
							color: #FFF;
						}
					}
				}

				> div {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;

					span {
						font-size: 15px;
						color: #333;
						margin-left: 8px;
					}
				}

				svg {
					width: 16px;
				}
				
				&:hover {
					background: var(--el-color-primary-dark-2);
					color: #FFF;
					border-top: 1px solid var(--el-color-primary-dark-2);
					
					.sj {
						border-color: #FFF transparent transparent;
					}
					
					> div {
						span, svg {
							color: #FFF;
						}
					}
				}
			}

			.navMode {
				overflow: hidden;
				transition: height .2s;

				.navChildrenItem {
					width: 100%;
					height: 50px;
					border-top: 1px solid #F3F3F3;
					
					.navChildrenContent {
						cursor: pointer;
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						padding: 0 12px 0 42px;

						svg {
							width: 16px;
						}

						&:hover {
							background: var(--el-color-primary-light-8);
						}

						&:active {
							background: var(--el-color-primary-light-6);
						}
						
						&.navChildrenContentOn {
							color: var(--el-color-primary);
							background: var(--el-color-primary-light-9);
						}
					}
				}
			}
		}
	}

	@media screen and (max-width: 980px) {
		.manageNav {
			overflow-y: unset;
		}
		
		.sj {
			display: none !important;
		}
		
		.navItem {
			position: relative;
			height: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
			
			&:hover {
				.navMode {
					transform: scale(1,1) !important;
				}
			}
			
			.navItemTitle {
				width: 100%;
				height: 50px !important;
				text-align: left;
				
				span {
					white-space: nowrap;
				}
			}
			
			.navMode {
				position: absolute;
				z-index: 999;
				left: 100%;
				width: 120px;
				border-radius: 5px;
				height: auto !important;
				transform: scale(0,0);
				transition: all .2s;
				background: #FFF;
				box-shadow: 0 0 10px 0 rgba(156, 156, 156,.2);
				
				.navChildrenItem {
					.navChildrenContent {
						padding: 0 12px !important;
						display: flex !important;
						justify-content: center !important;
						align-items: center !important;
					}
				}
			}
		}
	}
</style>